<template>
	<view>
		<view class="operation-user-confirm">
			<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);">
<!-- 				<view class="conItem">
					
					<view class="sectionTit">监护人</view>
					<view class="user">
						<view class="left">
							<view class="img-top">
								<img src='../../../../static/icon/3.png' alt="1"/>
							</view>
							<view class="introducet">
								<view class="name">
										{{data.guarder1Name}}
								</view>
								<view class="msg">
									28岁Louis
								</view>
							</view>
						</view>
						<view class="right">
							 <button class="right-btn" type="primary"  @click="confirmIdentity(data.guarder1Id)">身份确认</button>
						</view>
					</view>
					
				</view> -->
				<view class="conItem" v-for="item in list">
					
					<view class="sectionTit">{{item.typeName}}</view>
					<view class="user">
						<view class="left">
							<view class="img-top">
								<img src='../../../../static/icon/3.png' alt="1"/>
							</view>
							<view class="introducet">
								<view class="name">
										{{item.name}}
								</view>
								<view class="msg">
									28岁Louis
								</view>
							</view>
						</view>
						<view class="right">
							 <button class="right-btn" type="primary" @click="confirmIdentity(item.name)">身份确认</button>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
	<uni-popup ref="popup" type="dialog">
		<view class="popMain">
			<view class="popHeader">
				人员身份验证
			</view>
			<view class="popInput">
				<input class="uni-input" type="password" focus v-model="inputValue" placeholder="请输入验证密码" />
			</view>
			<view class="popTip">
				请输入验证密码，以便于验证您的人员身份信息
			</view>
			<view class="popBtns">
				<button type="default" @click="cancel">取消</button>
				<button type="primary" @click="popConfirm">确定</button>
			</view>
		</view>
	</uni-popup>
 	</view>
 </template>
 
 <script>
	 import uniPopup from '@/components/uni-popup/uni-popup.vue'
	 import {
	 	login
	 } from '@/api/oauth.js'
	export default {
		data() {
			return {
				inputValue:'',
				userId: '',
			}
		},
		props:{
			data:{
				type:Object
			}
		},
	   components: {
			uniPopup,
		},
		computed:{
		  list() {
			  const result = this.data
			  let persons = []
			  if(result.guarder1Name) {
				  persons.push({
					  typeName: '监护人',
					   id: result.guarder1Id,
					   name: result.guarder1Name
				  })
			  }
			  if(result.guarder2Name) {
				  persons.push({
					  typeName: '监护人',
					   id: result.guarder2Id,
					   name: result.guarder2Name
				  })
			  }
			  if(result.operator1Name) {
				  persons.push({
					  typeName: '操作人',
					   id: result.operator1Id,
					   name: result.operator1Name
				  })
			  }
			  if(result.operator2Name) {
				  persons.push({
					   typeName: '操作人',
					   id: result.operator2Id,
					   name: result.operator2Name
				  })
			  }
			  return persons  
		  }
		},
		methods: {
			// 身份确认
			confirmIdentity(name){
				this.userName = name
				this.$refs.popup.open()
			},
			cancel(){
			  this.$refs.popup.close()
			},
			async popConfirm(){
				const result = await login({password: this.inputValue, username: 'wangyu' })
				console.log(result, 5555)
				if(result.success) {
					uni.showToast({
					    title: res.message,
					    duration: 2000
					});
					this.$refs.popup.close()
				}
			},
		}
	}
 </script>
 
<style lang="scss">
	.operation-user-confirm{
		
	page{
		background-color: #f9f9f9;
	}
	.mainMenu{
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		display: flex;
	}
	.mmitem{
		flex: 1;
		text-align: center;
		font-size: 28upx;
		color: #333333;
	}
	.condation{
		background-color: #ffffff;
		margin-top: 16upx;
		border-radius: 8upx;
	}
	.conmenus{
		display: flex;flex-direction: row;
		padding-top:32upx;
		padding-bottom:32upx;
		border-bottom: solid 1upx #e6e6e6;
	}
	.conmenus:last-child{
		border: 0;
	}
	.conleft{
		width: 40%;
		padding-left: 24upx;
		color: #333333;
		font-size: 28upx;
	}
	.conright{
		text-align: right;
		width: 60%;
		direction: right;
		padding-right: 24upx;
		color: #666666;
		font-size: 28upx;
	}
	.mmactive{
		border-bottom: solid 4upx #1E91E6;
	}

	.salfTitle{
		display: flex;
	}
	.salfContent{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 8upx;
		margin-top: 24upx;
		margin-bottom: 24upx;
	}
	.salfContentso{
		padding-top: 24upx;padding-bottom: 26upx;width: 80upx;text-align: center;
				color:#666666;border-right: #e7e7e7 solid 1upx;
	}
	.content{
		height: calc(100vh - 318upx);
	}
	.conItem{
		border-radius: 20upx;
		background-color: #ffffff;
		margin-bottom: 20upx;
		.sectionTit{
			border-bottom: 1px solid #E2E2E2;
			padding: 32upx 24upx 24upx 24upx;
			&::before{
				content:'';
				display: inline-block;
				width: 5upx;
				height: 32upx;
				background-color: #1E90E6;
				margin-right: 16upx;
			}
		}
	}
	.user{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 32upx ;
	}
	.user:nth-child(1){
		margin-top: 0px !important;
	}
	.left{
		flex: 1;
		border-right:1px solid #eee ;
		display: flex;
		.name{
			color:#EE3F4E;
			font-size: 36upx;
			margin-bottom: 5upx;
		}
		.msg{
			color:#999;
			font-size: 24upx;
		}
		.img-top{
			flex: 1;
			img{
				width: 100%;
			}
		}
		.introducet{
			flex: 2;
			padding-left: 24upx;
			box-sizing: border-box;
		}
	}
	.right{
		flex: 1;
		
	}
	.right-btn{
		max-width: 55%;
		margin-left: 25%;
		white-space: nowrap;
		font-size: 28upx;
		border-radius: 42upx;
		background-color:  #5EAFEE;
	}
	.botton-btn{
		position: fixed;
		bottom: 20upx;
		width: 90%;
		left: 5%;
		background-color: #1E90E6;
	}
	}
	.popMain{
		text-align: center;
		background-color: #fff;
		// width: 580upx;
		border-radius: 30upx;
		margin-left: 54upx;
		margin-right: 54upx;
		padding: 56upx 35upx 35upx 35upx;
		.popHeader{
			font-size: 34upx;
			
		}
		.popInput{
			line-height: 20upx;
			padding: 72upx 73upx 24upx 73upx;
			border-bottom: 1px solid #eaeaea;
		}
		.popTip{
			padding: 40upx 73upx;
			line-height: 44upx;
			font-size: 28upx;
			color: #666;			
		}
		.popBtns{
			display: flex;
			justify-content: space-between;
			button{
				height: 72upx;
				line-height: 72upx;
				font-size: 28upx;
				flex:1;
				background-color: #1E90E6;
				&:first-child{		
					background-color: #fff;
					margin-right: 24upx;
				}
				
			}
		}
		
	}
 </style>